<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>推荐课程选择页面</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/global.css" />
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/commons.js"></script>
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a><cite>导航元素</cite></a>
            </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card" id="saveTr">
						<div class="layui-card-body ">
							<form class="layui-form layui-col-space5">
								<div class="layui-input-inline layui-show-xs-block">
									<input type="text" id="courseName" placeholder="课程名称" autocomplete="off" class="layui-input">
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<select id="checkId">
									</select>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button class="layui-btn" type="button" @click="selEdu()" lay-filter="sreach" id="btn">
                                        <i class="layui-icon">&#xe615;</i>
									</button>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button class="layui-btn" type="button" lay-filter="sreach" id="empty">
                                        <i class="layui-icon">清空</i>
									</button>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button class="layui-btn" type="button" lay-filter="sreach" id="addCourse">
                                        <i class="layui-icon">添加</i>
									</button>
								</div>
							</form>
						</div>

						<div class="layui-card-body ">
							<table class="layui-table layui-form">
								<thead>
									<tr>
										<th>
											<input lay-skin="primary" name="checkCourse" lay-filter="allChoose" type='checkbox'>
										</th>
										<th>课程名称</th>
										<th>专业</th>
										<th>原价</th>
										<th>优惠价</th>
										<th>课时</th>
										<th>创建时间</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(cour,index) in pageArr">
										<td>
											<input lay-skin="primary" name="checkCourse" v-model="checkCourseId" :value="cour.courseId" id="allCheck" type="checkbox">
										</td>
										<td>{{ cour.courseName }}</td>
										<td>{{ cour.name }}</td>
										<td>{{ cour.sourcePrice }}</td>
										<td>{{ cour.currentPrice }}</td>
										<td>{{ cour.lessionNum }}</td>
										<td>{{ cour.addTime }}</td>
									</tr>
								</tbody>
							</table>
							<div class="paging" id="pageHelper">
								<a href="#" @click="first" title="">首页</a>
								<a id="backpage" href="#" @click="last" title="">&lt;</a>
								<a href="#" @click="tiao(t)" title="" v-for="t in totalPage">{{ t }}</a>
								<a id="nextpage" href="#" @click="next" title="">&gt;</a>
								<a href="#" @click="end" title="">尾页</a>
								<a id="nextpage" href="#" title="">共{{ totalPage }}</a>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<!--引入Vue的js 开发环境版本., 包含了有帮助的命令行警告-->
		<script src="./js/vue.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script>
			const saveTr = new Vue({
				el: "#saveTr",
				data: {
					eduCourse: [],
					eduDetail: [],
					checkCourseId: [],
					page: 1, //当前页
					totalPage: 0, //总页数
					pageArr: [] //总数据
				},
				//页面加载事件
				created() {
					this.checkCourse();
				},
				methods: {
					checkCourse(){
						axios.defaults.headers.common["token2"] = $.cookie("token2");
						let _this = this;
						axios.get("http://localhost:9095/admin/courseDetail/showAllDetail").then(function(response) {
							if (response.data.code == 200){
								var dto = response.data.data.listDto;
								var detail = response.data.data.listDetail;
								for (var i=0; i<dto.length; i++){
									for (var j=0; j<detail.length; j++){
										if(dto[i].courseId==detail[j].courseId){
											_this.checkCourseId.push(dto[i].courseId);
											console.log(dto[i].courseId);
										}
									}
								}
								//  response.data.data.listDto  获取的所有的课程信息
								//  response.data.data.listDetail  获取的是所有推荐课程
								console.log(response.data.data.listDto);
								_this.eduCourse = response.data.data.listDto;
								_this.eduDetail = response.data.data.listDetail;
								_this.pageArr = _this.eduCourse;
								_this.totalPage = Math.ceil(_this.eduCourse.length / 10);
								_this.first();
							} else {
								alert("查询失败,暂无数据");
							}
						});
					},
					selEdu() {
						axios.defaults.headers.common["token2"] = $.cookie("token2");
						//点击事件, （模糊查询）
						var postData = new URLSearchParams();
						if ($("#courseName").val() != ''){
							postData.append("courseName", $("#courseName").val());
						}
						postData.append("subjectLink", $("#checkId option:checked").val());
						if($("#courseName").val() == '' && $("#checkId option:checked").val() == 0) {
							location.reload();
						}
						let _this = this;
						axios({
							method: "get",
							url: "http://localhost:9095/admin/courseDetail/getEduCourse",
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							params: postData
						}).then(function(response) {
							_this.checkCourseId='';
							if(response.data.data == null) {
								//提示信息
								layer.alert('查询失败,暂无数据！', {
									icon: 5,
									title: '提示'
								});
								return;
							}
							_this.eduCourse = response.data.data;
							_this.pageArr = _this.eduCourse;
							_this.totalPage = Math.ceil(_this.eduCourse.length / 10);
							_this.first();
						});
					},
					//首页
					first: function() {
						this.page = 1;
						this.pageArr = pageHelp(this.eduCourse, 10, this.page);
					},
					//上一页
					last: function() {
						if(this.page == 1) {
							layer.msg('当前已是首页!', {
								icon: 1,
								time: 1000
							});
						} else {
							this.page = this.page - 1;
							this.pageArr = pageHelp(this.eduCourse, 10, this.page);
						}
					},
					//下一页
					next: function() {
						if(this.page == this.totalPage) {
							layer.msg('当前已是尾页!', {
								icon: 1,
								time: 1000
							});
						} else {
							this.page = this.page + 1;
							this.pageArr = pageHelp(this.eduCourse, 10, this.page);
						}
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.pageArr = pageHelp(this.eduCourse, 10, this.totalPage);
					},
					tiao: function(obj) {
						this.page = obj;
						this.pageArr = pageHelp(this.eduCourse, 10, obj);
					}
				}
			})
		</script>

	</body>

	<script>
		layui.use(['laydate', 'form', 'layer'],
			function() {
				var laydate = layui.laydate,
					form = layui.form,
					layer = layui.layer;

				$.ajax({
					type: "get",
					url: "http://localhost:9095/admin/sysSubject/getSubject",
					async: true,
					headers: {
						"token2": $.cookie("token2")
					},
					success: function(massage) {
						var msg = massage.data;
						if(msg != undefined && msg != null && msg != "") {
							var html = "";
							for(var i = 0; i < msg.length; i++) {
								if(i == 0) {
									html += "<option value='0'>专业</option>"
								} else {
									html += "<option value='" + msg[i].subjectId + "'>" + msg[i].subjectName + "</option>"
								}
							}
							$("#checkId").append(html);
							form.render('select');
						}
					}
				});

				//全选
				form.on('checkbox(allChoose)', function(data) {
					var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
					child.each(function(index, item) {
						item.checked = data.elem.checked;
					});
					form.render('checkbox');
				});

				$(document).on('click', '#empty', function() {
					$("#courseName").val("");
					$("#checkId").find("option[value=" + 0 + "]").prop("selected", true);
					form.render();
				});

				//提交课程
				$(document).on('click', '#addCourse', function() {
					obj = document.getElementsByName("checkCourse");
					check_val = [];
					console.log(obj)
					for(k in obj) {
						if(obj[k].checked)
							check_val += obj[k].value + ",";
					}
					if(check_val.length == 0) {
						alert("首页推荐课程为空, 请确认后再提交！");
					} else {
						var arr = check_val.split(",");
						if(arr.length > 8) {
							alert("推荐课程最多为8个,请检查后在提交！");
							return;
						}
						console.log(check_val);
						var id = '';
						$.ajax({
							type:"post",
							url:"http://localhost:9095/admin/courseDetail/AddDetail",
							async:true,
							data :{
				         		"courseId": check_val
				         	},
				         	headers: {
								"token2": $.cookie("token2")
							},
							success: function(msg) {
								if (msg.code == 200){
									layer.msg('添加推荐课程成功,跳转至推荐课程页面');
									window.parent.location.reload(); //刷新父页面
									// 获得frame索引
									var index = parent.layer.getFrameIndex(window.name);
									//关闭当前frame
									parent.layer.close(index);
								}
							}
						});
//						$.post("http://localhost:9095/admin/courseDetail/AddDetail", {
//							"courseId": check_val
//						}, function(msg) {
//							if (msg.code == 200){
//								layer.msg('添加推荐课程成功,跳转至推荐课程页面');
//								window.parent.location.reload(); //刷新父页面
//								// 获得frame索引
//								var index = parent.layer.getFrameIndex(window.name);
//								//关闭当前frame
//								parent.layer.close(index);
//							}
//						})
						
					}
				})
			});
	</script>

</html>